<template>
	<view class="map_box">
		<!-- <image class="back_up" src="../../static/city-manage/back.png"></image> -->
		<!-- #ifdef H5-->
		<view id="PublicMap"></view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<map class="H5_map" :latitude="latitude" :longitude="longitude" :markers="covers" :polygons="polygon" scale="16"></map>
		<!-- #endif -->
		<view class="map_legend">
			<view class="legend_item">
				<view class="QJ_border"></view>
				<view class="legend_text">曲江边界</view>
			</view>
			<view class="legend_item">
				<image class="address" src="../../static/city-manage/case.png"></image>
				<view class="legend_text">案件位置</view>
			</view>
			<view class="legend_item">
				<image class="address" src="../../static/city-manage/uni-address.png"></image>
				<view class="legend_text">我的位置</view>
			</view>
		</view>
		<view class="uni-report">
			<view @click="saveCurrentAddress">点击提交位置信息</view>
		</view>
	</view>
</template>

<script>
	import {getQjBjMapData} from '@/api/configure.js'
	export default{
		data(){
			return {
				GDMap: null,
				marker: null,
				//APP
				longitude:'108.99569',
				latitude:'34.20124',
				covers:[],
				//案件的坐标
				gdx:'',
				gdy:'',
				//曲江面数据
				QJPolygonData: null,
				polygon:[{
					points: [],
					strokeColor: 'pink',
					strokeWidth: 3,
					fillColor: '#007aff'
				}],
				addressName:'',
				currentXy:{
					gdx:'',
					gdy:'',
				}
			}
		},
		onLoad(options){
			//案件坐标
			this.gdx = options.gdx;
			this.gdy = options.gdy;

			// #ifdef H5
			this.$nextTick(()=>{
				this.initMap();
			})
			// #endif

			// #ifdef APP-PLUS
			this.longitude = this.gdx;
			this.latitude = this.gdy;
			//定位
			this.geoLocation();//在定位的时候把案件位置一起push进去
			// #endif

			this.longitude = this.gdx;
			this.latitude = this.gdy;

			// APP-PLUS 获取曲江边界
			this.getQjBjMapData();

		},
		methods:{
			//关闭当前页面，当前位置已经存储到storage中
			saveCurrentAddress(){
				if(uni.getStorageSync('currentLocation') == ''){
					return;
				}

				uni.navigateBack({
				    delta: 1
				});
			},
			//初始化地图
			initMap(){
				this.GDMap = new AMap.Map('PublicMap', {
					zoom: 14,
					viewMode: '2D',
					center: [108.99569,34.20124],
					resizeEnable: true,
				});
				this.initPoint(this.gdx, this.gdy);
				//定位
				let _this = this;
				this.GDMap.plugin('AMap.Geolocation', function () {
					var geolocation = new AMap.Geolocation({
						enableHighAccuracy: true,// 是否使用高精度定位，默认：true
						convert:true,
						showMarker:true,
						panToLocation:true,
					});
					_this.GDMap.addControl(geolocation);
					geolocation.getCurrentPosition();
					AMap.event.addListener(geolocation, 'complete', onComplete)
					AMap.event.addListener(geolocation, 'error', onError)

					function onComplete(data) {
						// data是具体的定位信息
						_this.GDMap.setCenter(data.position);// 执行定位
						//把当前处置人员的位置存到storage
						uni.setStorageSync('currentLocation', {currentx: data.position.lng,currenty:data.position.lat, currentAddress: data.formattedAddress})
					}

					function onError(data) {
						// 定位出错
					}
				})
				//获取曲江边界
				this.getQjBjMapData();
			},
			//获取曲江边界
			async getQjBjMapData(){
				const response = await getQjBjMapData();

				if(response.code == 200){
					this.QJPolygonData = JSON.parse(response.msg).coordinates;

					this.polygon = [];
					this.polygon = [{
						points: [],
						strokeColor: 'pink',
						strokeWidth: 3,
						fillColor: '#007aff'
					}];
					this.QJPolygonData[0].forEach((ele) => {
						this.polygon[0].points.push({latitude:ele[1], longitude: ele[0]})
					})

					//画出曲江边界
					// #ifdef H5
					this.initQJPolygon();
					// #endif
				}else{
					this.$tip.toast(response.msg)
				}
			},
			//定位
			geoLocation(){
				let _this = this;
				uni.showLoading({
					title:'定位中,确保允许访问位置信息'
				});
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success (res) {
						_this.$tip.toast(res)
						_this.currentXy.gdx = res.longitude;
						_this.currentXy.gdy = res.latitude;
						// #ifdef APP-PLUS
						_this.addressName = res.address.province+res.address.city+res.address.district+res.address.street+res.address.streetNum+res.address.poiName;
						// #endif
						_this.covers.push({
							latitude: _this.currentXy.gdy,
							longitude: _this.currentXy.gdx,
							iconPath: '../../static/city-manage/uni-address.png'
						},{
							latitude: _this.gdy,
							longitude: _this.gdx,
							iconPath: '../../static/city-manage/case.png'
						});
						//把当前处置人员的位置存到storage
						uni.setStorageSync('currentLocation', {currentx: _this.currentXy.gdx,currenty: _this.currentXy.gdy, currentAddress: _this.addressName});
						uni.hideLoading()
					}
				});
			},
			//画出曲江边界
			initQJPolygon(){
				let Polygon = new AMap.Polygon({
					map: this.GDMap,
					path: this.QJPolygonData,
					strokeColor: 'pink',
					strokeOpacity: 0.8,
					strokeWeight: 3,
					strokeStyle: "dashed",
					fillColor: '#007aff',
					fillOpacity: 0.4,
					zIndex: 999
				});
				this.GDMap.setFitView(Polygon);// 执行定位
			},
			//定位案件位置
			initPoint(gdx, gdy){
				var icon = new AMap.Icon({
				    size: new AMap.Size(40, 50),    // 图标尺寸
				    //image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',  // Icon的图像
					image: '../../static/city-manage/case.png',
				    imageSize: new AMap.Size(25, 25)   // 根据所设置的大小拉伸或压缩图片
				});
				this.marker = new AMap.Marker({
					icon: icon,
					position: [gdx, gdy],
					offset: new AMap.Pixel(-13, -30)
				});
				this.marker.setMap(this.GDMap);
				this.GDMap.setCenter([gdx, gdy]);// 执行定位
			},
		}
	}
</script>

<style lang="scss">
	.map_box{
		position: relative;
		margin:0 auto;
		width:750rpx;
		height:100%;
		display:flex;
		justify-content: center;
		//align-items: center;
		z-index: 1;
		background: #fff;
		.back_up{
			width:80rpx;
			height:80rpx;
			background: rgba(0,0,0,0.8);
			padding: 10rpx;
			position: absolute;
			top:60rpx;
			left:0;
			z-index: 999;
		}
		.map_legend{
			box-shadow: #b5cede 0px 0px 10px;
			background: white;
			padding: 10rpx;
			position: absolute;
			bottom: 20rpx;
			left: 20rpx;
			.legend_item{
				height:50rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-size: 24rpx;
				line-height: 50rpx;
				.address{
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
				.QJ_border{
					width:50rpx;
					height:34rpx;
					background: #007aff;
					border: 2px solid pink;
				}
			}
		}
		.uni-report{
			width: 340rpx;
			height: 80rpx;
			background: linear-gradient(to right, #ee625f, #ae0909);
			border-radius: 80rpx;
			position: absolute;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			position: absolute;
			bottom:40rpx;
			left:0;
			right:0;
			margin:auto;
			z-index: 999;
		}
	}
	// #ifdef H5
	#PublicMap{
		width:750rpx;
		height:100%;
		height:calc(100% - 240rpx);
	}
	.H5_map{
		width:750rpx;
		height:100%;
		height:calc(100% - 240rpx);
	}
	// #endif
	// #ifdef APP-PLUS
	.H5_map{
		width:750rpx;
		height:100%;
		height:calc(100% - 240rpx);
	}
	// #endif

</style>
